<template>
  <div>
      <h1>子传父</h1>
    <h5>方法一：$emit 事件传递</h5>
    {{msg}}
    <Son @sendMsg="getMsgFormSon"></Son>
    <h5>方法二：$parent</h5>
    {{msg2}}
    <Son2></Son2>

    <h5>--------------------------</h5>
    <h1>父传子</h1>
    <h5>方法一：props</h5>
    <Son3 :toChild="msg3" />
    <h5>方法二：ref</h5>
    <Son4 ref="msg1"/> <button @click="son4fuc">传值给son4</button>
  </div>
</template>

<script>
import Son from './components/son.vue'
import Son2 from './components/son2.vue'
import Son3 from './components/son3.vue'
import Son4 from './components/son4.vue'
export default {
  components: {
    Son,
    Son2,
    Son3,
    Son4
  },
  data() {
    return {
        msg:'我是父组件的值，暂时还没传过来',
        msg2:'我是父组件的值，暂时还没传过来',
        
        msg3:'我是父亲组件的值'
    }
  },
  methods: {
      getMsgFormSon(data) {
          this.msg = data
      },
      func() {
          alert('111')
      },
      son4fuc() {
          this.$refs.msg1.getMessage('父组件传给我的值')
      }
      
  },
}
</script>

<style></style>
